<template>
  <view class="icon-text" :style="containerStyle">
    <image 
      v-if="src" 
      :src="src" 
      class="icon-image" 
      :style="imageStyle"
      mode="aspectFit"
    ></image>
    <text v-if="showText" class="icon-label" :style="textStyle">{{ text }}</text>
  </view>
</template>

<script>
export default {
  name: 'IconText',
  props: {
    // 图标路径
    src: {
      type: String,
      required: true
    },
    // 图标大小
    size: {
      type: [Number, String],
      default: 24
    },
    // 文字
    text: {
      type: String,
      default: ''
    },
    // 是否显示文字
    showText: {
      type: Boolean,
      default: false
    },
    // 文字颜色
    color: {
      type: String,
      default: '#666666'
    },
    // 排列方向: row | column
    direction: {
      type: String,
      default: 'column'
    }
  },
  computed: {
    containerStyle() {
      return {
        flexDirection: this.direction,
        gap: this.direction === 'row' ? '8rpx' : '4rpx'
      }
    },
    imageStyle() {
      const size = typeof this.size === 'number' ? `${this.size}rpx` : this.size
      return {
        width: size,
        height: size
      }
    },
    textStyle() {
      return {
        color: this.color,
        fontSize: '24rpx'
      }
    }
  }
}
</script>

<style scoped>
.icon-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-image {
  flex-shrink: 0;
}

.icon-label {
  white-space: nowrap;
}
</style>

